<template>
  <div class="manual-entry-container">
    <div>
      <ul>
        <li>
          <span class="active">课程编号</span>
          <span>{{ tablelist.coursenumber }} </span>
          <span class="active">课程名称</span>
          <span>{{ tablelist.coursename }}</span>
        </li>
        <li>
          <span class="active">修习类型</span>
          <span>{{ tablelist.studytype }}</span>
          <span class="active">任课教员</span>
          <span>{{ tablelist.teachingfaculty }}</span>
        </li>
        <li>
          <span class="active" style="height: 130px; padding-top: 50px"
            >成绩录入统计</span
          >
          <span style="padding-top: 12px; border-right: 0px">
            课下作业成绩应录<span>{{ tablelist.kxyl }}</span
            >人 已录<span>{{ tablelist.kxnum }}</span
            >人未录<span>{{ tablelist.kxnumw }}</span
            >人已审核<span>{{ tablelist.kxys }}</span
            >人<br /><br />
            期中考试成绩应录<span>{{ tablelist.ktryl }}</span
            >人 已录<span>{{ tablelist.ktrenum }}</span
            >人 未录<span>{{ tablelist.ktrenumw }}</span
            >人已审核<span>{{ tablelist.ktys }}</span
            >人</span
          >
          <span style="width: 900px; padding-top: 12px; padding-left: 300px">
            课堂测评成绩应录<span>{{ tablelist.qzyl }}</span
            >人 已录<span>{{ tablelist.qznum }}</span
            >人未录<span>{{ tablelist.qznumw }}</span
            >人已审核<span>{{ tablelist.qzys }}</span
            >人<br /><br />
            课终考核成绩应录<span>{{ tablelist.kzyl }}</span
            >人 已录<span>{{ tablelist.kznum }}</span
            >人 未录<span>{{ tablelist.kznumw }}</span
            >人已审核<span>{{ tablelist.kzys }}</span
            >人</span
          >
        </li>
      </ul>
      <div>
        <div>成绩录入参数信息:</div>
        <div>
          前课程成绩
          <span
            >当所用分制: <span>{{ tablelist.scoretypecode }}</span></span
          >
          <span
            >课下作业成绩所占比例:
            <span
              v-if="
                tablelist.scoretypecode === '百分制' && tablelist.usualscorerate
              "
              >{{ tablelist.usualscorerate }}%</span
            >
            <span v-else>{{ tablelist.usualscorerate }}</span>
          </span>
          <span
            >课堂测评成绩所占比例:
            <span
              v-if="
                tablelist.scoretypecode === '百分制' && tablelist.examscorerate
              "
              >{{ tablelist.examscorerate }}%</span
            >
            <span v-else>{{ tablelist.examscorerate }}</span>
          </span>
          <span
            >期中考试成绩所占比例:
            <span
              v-if="
                tablelist.scoretypecode === '百分制' &&
                tablelist.midtermscorerate
              "
              >{{ tablelist.midtermscorerate }}%</span
            >
            <span v-else>{{ tablelist.midtermscorerate }}</span>
          </span>
          <span
            >课终考核成绩所占比例:
            <span
              v-if="
                tablelist.scoretypecode === '百分制' &&
                tablelist.experimentscorerate
              "
              >{{ tablelist.experimentscorerate }}%</span
            >
            <span v-else>{{ tablelist.experimentscorerate }}</span>
          </span>
          <span
            >考试成绩一票否决:
            <span>{{ tablelist.oneticketveto }}</span>
          </span>
        </div>
      </div>
      <ul>
        <li>
          <span class="active">序号</span>
          <span class="active">学号[姓名]</span>
          <span class="active">专业班次</span>
          <span class="active">课下作业成绩</span>
          <span class="active">课堂测评成绩</span>
          <span class="active">期中考试成绩</span>
          <span class="active"
            >课终考核成绩
            <span @click="toBarcodeEntry()">扫描条形码录入</span></span
          >
          <span class="active">总评成绩</span>
          <span class="active">成绩性质</span>
        </li>
        <li>
          <div>
            <span>专业班次：</span>
            <span>{{ tablelist.professionaldivisions }}</span>
          </div>
        </li>
        <li v-for="(item, index) in tableData" :key="index">
          <span>{{ index + 1 }}</span>
          <span>{{ item.studentid }}【{{ item.name }}】 </span>
          <span>{{ item.majorclass }}</span>
          <span style="padding-top: 12px">
            <el-input
              style="width: 60px"
              size="small"
              v-model="item.checkusualscore"
              :disabled="item.kxzystate == 2 || item.kxzystate == 3"
            ></el-input>
          </span>
          <span style="padding-top: 12px">
            <el-input
              style="width: 60px"
              size="small"
              v-model="item.checkexperimentscore"
              :disabled="item.ktcpstate == 2 || item.ktcpstate == 3"
            ></el-input>
          </span>
          <span style="padding-top: 12px">
            <el-input
              style="width: 60px"
              size="small"
              v-model="item.checkmidtermscore"
              :disabled="item.qzksstate == 2 || item.qzksstate == 3"
            ></el-input>
          </span>
          <span></span>
          <span>{{ item.scorenumber }}</span>
          <span style="padding-top: 15px">
            <el-select
              v-model="item.viewtype"
              placeholder="请选择"
              size="mini"
              style="width: 88px"
            >
              <el-option
                v-for="(item, index) in achievementNatures"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </span>
        </li>
      </ul>
    </div>
    <div style="display: flex; width: 230px; margin: 0 auto">
      <div class="button-group" @click="zc">
        <div>暂存</div>
      </div>
      <div class="button-group" @click="preservePostLists()" style="margin-left:20px">
        <div>提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryList,
  queryPostList,
  preservePostList,
  queryzc
} from "../../../api/courseAchievement/manualEntry";

export default {
  name: "manualEntry",
  data() {
    return {
      tablelist: {
        professionaldivisions: "班次",
        scoretypecode: "百分制",
        proportion: 0,
        examscorerate: "100",
        against: "啊",
        coursenumber: "265845",
        coursename: "(博士课)话语分aaa析专题研究",
        studytype: "必修",
        teachingfaculty: "(博士课)陈春华",
        achievementNature: "期末",
      },
      achievementNatures: [
        { label: "期末", value: "期末" },
        { label: "期中", value: "期中" },
      ],
      tableData: [
        {
          ktwork: "",
          ktreview: "",
          qzreview: "",
          kzreview: "",
          oldview: "",
          studentid: "111213",
          name: "张三是峰",
          majorclass: "专业一班",
          checkusualscore: "",
          checkexperimentscore: "",
          checkmidtermscore: "",
          scorenumber: "90",
        },
        {
          studentid: "111213",
          name: "张三",
          majorclass: "专业一班",
          checkusualscore: "",
          checkexperimentscore: "",
          checkmidtermscore: "",
          scorenumber: "90",
        },
      ],
    };
  },
  methods: {
    toBarcodeEntry() {
      this.$router.push("/teacher/courseAchievement/barcodeEntry");
    },

    queryList: function () {
      return new Promise(() => {
        queryList(this.$route.query.planid).then((res) => {
          console.log("aaaa");
          this.tablelist = res.data.data;

          console.log("bbbb");
          console.log(res.data.data);
        });
      });
    },
    queryPostList: function () {
      let pland = this.$route.query.planid;
      return new Promise(() => {
        queryPostList(pland).then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData[0].studentid);
          console.log(res.data.data);
        });
      });
    },
    zc() {
      return new Promise(() => {
        queryzc(this.tableData).then((res) => {
          this.$message({
            type: "success",
            message: "暂存成功!",
          });
        });
      });
    },
    preservePostLists: function () {
      return new Promise(() => {
        preservePostList(this.tableData).then((res) => {
          if (res.data.code) {
            this.$router.push("/teacher/courseAchievement/printEntry");
            this.$message({
              type: "success",
              message: "保存成功!",
            });
          }
        });
      });
    },
  },
  mounted() {
    console.log(this.$route.query.planid);
    this.queryList();
    this.queryPostList();
  },
};
</script>

<style scoped lang="less">
.manual-entry-container {
  > div:nth-child(1) {
    width: 1735px;
    height: 785px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 70px auto 0;

    ul {
      list-style: none;

      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;

        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;

          &:nth-child(n) {
            width: 357px;
          }

          &:nth-child(2n) {
            width: 444px;
          }

          &:last-child {
            border-right: none;
          }

          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
        }
      }

      &:nth-child(1) {
        li {
          > span {
            height: 60px;
          }
        }
      }

      &:nth-child(3) {
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);

          > span {
            width: 400px;
            text-align: center;
            padding-left: 0;
            height: 60px;

            &:nth-child(1) {
              width: 144px;
            }

            &:nth-child(2) {
              width: 180px;
            }

            &:nth-child(3) {
              width: 259px;
            }

            &:nth-child(4) {
              width: 196px;
            }

            &:nth-child(5) {
              width: 197px;
            }

            &:nth-child(6) {
              width: 209px;
            }

            &:nth-child(7) {
              width: 215px;
              padding-top: 8px !important;

              > span {
                display: inline-block;
                width: 121px;
                height: 28px;
                border: 1px solid #5230e9;
                background: rgba(235, 230, 255, 1);
                opacity: 1;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
                color: #5230e9;
                line-height: 18px;
                margin-top: 8px;
                padding: 5px 10px;
                cursor: pointer;
              }
            }

            &:nth-child(8) {
              width: 150px;
            }

            &:nth-child(9) {
              width: 182px;
            }

            &.active {
              border-top: 1px solid rgba(0, 76, 167, 0.4);
              height: 73px;
              padding-top: 25px;
            }
          }

          &:nth-child(2) {
            > div {
              height: 57px;
              padding: 18px 30px;

              > span {
                &:nth-child(1) {
                  font-size: 16px;
                  font-weight: bold;
                  color: #004ca7;
                }

                &:nth-child(2) {
                  font-size: 14px;
                  color: #004ca7;
                }
              }
            }
          }
        }
      }
    }

    > div {
      padding: 14px 83px;
      height: 78px;

      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }

      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;

          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }

  .button-group {
    text-align: center;
    margin-top: 36px;

    > div {
      display: inline-block;
      padding: 6px 20px;
      background: rgba(255, 246, 239, 1);
      border: 1px solid rgba(243, 184, 21, 1);
      border-radius: 4px;
      font-size: 18px;
      font-weight: 400;
      color: rgba(243, 184, 21, 1);
      text-align: center;
    }
  }
}
</style>
